<template>
    <div class="df aic jcsb ">
        <p  class="main_text">配件统计</p>
        <el-button type="primary" @click="backHome">返回首页</el-button>
    </div>
    <div class="main pr" style="z-index: 200;background-color: #e8eef4;">
        <div class="content  ">
          <el-row :gutter="10" >
            <el-col :span="16"  :lg="16" :md="24" :sm="24" :xs="24" style="   display: flex;flex-direction: column;">
              <div class="left_t df " style="flex: 1;flex-wrap: wrap">
                <div class="left_t_l df fdc " style="flex: 1;margin-right: 10px">
                  <div class="left_t_l_l br8" style="flex: 1;background-color: #FFFFFF">
                    <div style="font-size: 0.875rem;">昨日溯源件统计</div>
                    <div class="df jcse mt10">
                      <div class="df fdc aic">
                        <p style="font-size: 0.75rem; color: #4E5969;">昨日入库</p>
                        <p style="color: #2E2E3A; font-size: 1rem;">{{ fittingsInbound }}</p>
                      </div>
                      <div class="df fdc aic pl20" style="border-left: 0.0625rem dashed #E5E6EB;">
                        <p style="font-size: 0.75rem; color: #4E5969;">昨日上架商城</p>
                        <p style="color: #2E2E3A; font-size: 1rem;">{{ fittingsShop }}</p>
                      </div>
                      <div class="df fdc aic pl20" style="border-left: 0.0625rem dashed #E5E6EB;">
                        <p style="font-size: 0.75rem; color: #4E5969;">昨日出库</p>
                        <p style="color: #2E2E3A; font-size: 1rem;">{{ fittingsOutbound }}</p>
                      </div>
                    </div>
                  </div >
                  <div class="left_t_l_l br8" style="flex: 1;margin-top: 10px;background-color: #FFFFFF">
                    <div style="font-size: 0.875rem;">昨日非溯源件统计</div>
                    <div class="jcse df mt10">
                      <div class="df fdc aic">
                        <p style="font-size: 0.75rem; color: #4E5969;">昨日入库</p>
                        <p style="color: #2E2E3A; font-size: 1rem;">{{ partsInbound }}</p>
                      </div>
                      <div class="pl20 df fdc aic" style="border-left: 0.0625rem dashed #E5E6EB;">
                        <p style="font-size: 0.75rem; color: #4E5969;">昨日出库</p>
                        <p style="color: #2E2E3A; font-size: 1rem;">{{ partsOutbound }}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="left_t_r br8" style="background-color: #FFFFFF;flex:1">
                  <div class="df aic jcsb">
                    <div style="font-size: 0.875rem;">当前配件入库情况</div>
                    <div style="color: #B2B2B2; font-size: 0.75rem;">最近更新：{{updateTime}}</div>
                  </div>
                  <el-table :data="fittingsArr" style="width: 100%" class="mt10" size="small"
                            :header-cell-style="{ 'background': '#000' }" :cell-style="{ textAlign: 'center' }">
                    <el-table-column prop="fittingId" label="配件编号" :show-overflow-tooltip="true" />
                    <el-table-column prop="fittingName" label="配件名称" :show-overflow-tooltip="true" />
                    <el-table-column prop="typeName" label="配件类型" :show-overflow-tooltip="true" />
                    <el-table-column prop="brand" label="品牌" :show-overflow-tooltip="true" />
                    <el-table-column prop="warehouseName" label="入库仓库" :show-overflow-tooltip="true" />
                    <el-table-column prop="warehouseArea" label="入库位置" :show-overflow-tooltip="true" />
                  </el-table>
                </div>
              </div>

              <div class="left_c br8" style="background-color: #FFFFFF;margin-top: 10px">
                <div class="df aic jcsb" style="">
                  <div style="font-size: 0.875rem;">配件商城销售额统计</div>
                </div>

                <div class="df jcsb mt10">
                  <div style="width: 100%;">
                    <div class="pr">
                      <parts_echarts_2_1></parts_echarts_2_1>
                    </div>
                  </div>
                </div>
              </div>
              <div class="left_b br8" style="background-color: #FFFFFF;margin-top: 10px">
                <div class="df aic jcsb">
                  <div style="font-size: 0.875rem;">配件出入库趋势</div>
                  <el-radio-group size="small" v-model="trendRadio" text-color="#000" fill="#fff"
                                  style="z-index: 200;">
                    <el-radio-button label="溯源件" />
                    <el-radio-button label="非溯源件" />
                  </el-radio-group>
                </div>
                <div class="pr" v-if="trendRadio == '溯源件'">
                  <parts_echarts_6></parts_echarts_6>
                </div>
                <div class="pr" v-if="trendRadio == '非溯源件'">
                  <parts_echarts_6_1></parts_echarts_6_1>
                </div>
              </div>
            </el-col>
            <el-col :span="8"  :lg="8" :md="24" :sm="24" :xs="24" >
              <div class="right df fdc jcsb">
                <div class="right_l br8">
                  <div class="df jcsb aic ">
                    <div style="font-size: 0.875rem;">配件品牌统计</div>
                    <div style="color: #B2B2B2;font-size: 0.75rem;">更多详情</div>
                  </div>
                    <parts_echarts_1></parts_echarts_1>
                </div>
                <div class="right_l br8" style="margin-top: 10px">
                  <div class="df aic jcsb">
                    <div style="font-size: 0.875rem;">溯源件入库前五</div>
                  </div>
                  <div class="pr">
                    <parts_echarts_5></parts_echarts_5>
                  </div>
                </div>
                <div class="right_l br8" style="margin-top: 10px">
                  <div class="df aic jcsb">
                    <div style="font-size: 0.875rem;">溯源件出库前五</div>
                  </div>
                  <div class="pr">
                    <parts_echarts_3></parts_echarts_3>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref,onMounted } from 'vue';
import { formatTime } from '@/filters/index'
import { RequestStatisticGetCarScale, RequestFittingsGetlistlimit, RequestStatisticGetLastDayStoreInfo } from "@/api/path/index.js"
import { useRouter } from 'vue-router';
const router = useRouter()

import parts_echarts_1 from '@/components/parts/parts_echarts_1.vue'
import parts_echarts_2 from '@/components/parts/parts_echarts_2.vue'
import parts_echarts_2_1 from '@/components/parts/parts_echarts_2_1.vue'
import parts_echarts_2_2 from '@/components/parts/parts_echarts_2_2.vue'
import parts_echarts_3 from '@/components/parts/parts_echarts_3.vue'
import parts_echarts_5 from '@/components/parts/parts_echarts_5.vue'
import parts_echarts_6 from '@/components/parts/parts_echarts_6.vue'
import parts_echarts_6_1 from '@/components/parts/parts_echarts_6_1.vue'
const radio = ref('上架量')
const radio1 = ref('月')
const trendRadio = ref('溯源件')
const scrapCar = ref<any>([])               //报废车
const fittingsArr = ref<any>([])            //当前配件入库情况
const fittingsInbound = ref<any>()            //溯源件入库
const fittingsOutbound = ref<any>()           //溯源件出库
const fittingsShop = ref<any>()           //溯源件出库
const partsInbound = ref<any>()            //溯源件入库
const partsOutbound = ref<any>()           //溯源件出库
const updateTime = ref<string>('')
const getData = () => {
    /* 报废车统计 */
    RequestStatisticGetCarScale().then((res: any) => {
        scrapCar.value = res.resultObj
    })
    RequestFittingsGetlistlimit({
        page: 1,
        rows: 3
    }).then((res: any) => {
        fittingsArr.value = res.resultObj.data
        // console.log(222222222222222, formatTime(res.resultObj.data[0].updatedAt))
        updateTime.value = formatTime(res.resultObj.data[0].updatedAt)
        console.log(222222222222222, formatTime(fittingsArr.value[0].updatedAt))

    })
    RequestStatisticGetLastDayStoreInfo().then((res: any) => {
        console.log('asdadadada', res);
        res.resultObj.forEach((item: any) => {
            if (item.name == '昨日溯源件入库数量') {
                fittingsInbound.value = item.value
            } else if (item.name == '昨日溯源件出库数量') {
                fittingsOutbound.value = item.value
            } else if (item.name == '昨日非溯源件入库数量') {
                partsInbound.value = item.value
            } else if (item.name == '昨日非溯源件出库数量') {
                partsOutbound.value = item.value
            } else if (item.name == '昨日溯源件上商城数量') {
                fittingsShop.value = item.value
            }
        });
    })
}
getData()

/* 返回首页 */
const backHome = () => {
    router.push('/Home')
}

</script>

<style scoped lang="scss">
.main {
  //  width: v-bind(width);
  //height: 768px;
  //overflow-y: auto;

    .content {
        width: 100%;
        height: 100%;
        // background-color: #fff;

        .left {
          // width: calc(65% - 10px);
            height: 100%;

            .left_t {
               width: 100%;
                //height: calc(28.33% - 15px);

                .left_t_l {
                  // width: calc(40% - 10px);
                    height: 100%;

                    .left_t_l_l {
                        width: 100%;
                        height: calc(50% - 10px);
                        background-color: #fff;
                    }
                }

                .left_t_r {
                    //width: calc(60% - 10px);
                    height: 100%;
                    background-color: #fff;
                }
            }

            .left_c {
                width: 100%;
                height: calc(38.33% - 15px);
                background-color: #fff;
            }

            .left_b {
                width: 100%;
                height: calc(33.33% - 15px);
                background-color: #fff;
            }
        }

        .right {
            //width: calc(35% - 10px);
            height: 100%;

            .right_l {
                //width: 100%;
                //height: calc(33.33% - 15px);
                background-color: #fff;
            }
        }
    }
}

.second_list_right_r {
    width: 100%;
    // height: 26%;
    background-color: rgb(247, 248, 250);
    margin-bottom: 0.375rem;
    border-radius: 0.25rem;
}

.listStyle {
    width: 50%;
    height: 100%;
    border-right: 0.0625rem dashed #ccc;

    &:last-child {
        border-right: none
    }
}

.el-divider--horizontal {
    border-top: 0.0625rem dashed #e8eaec;
}

::v-deep .el-table th {
    text-align: center;
    background-color: #f6f8fa !important;
    border-right: 0.0625rem solid #fff;
    color: #ffffff;

    &:first-child {
        border-radius: 0.625rem 0rem 0rem 0.625rem;
    }

    &:last-child {
        border-radius: 0rem 0.625rem 0.625rem 0rem;
    }
}

::v-deep .el-radio-group {
    background-color: #f6f8fa;
    border: 0.125rem solid #f6f8fc;
}

::v-deep .el-radio-button--small .el-radio-button__inner {
    background-color: rgba($color: #000000, $alpha: 0);
    border: none;
}
@media screen and (max-width: 992px) {
   .left_t_l{
     margin-right: 0 !important;
   }
  .left_t_r{
    margin-top: 10px;
  }
}
</style>
